<template>
    <StudentForm :student="student" @submit="handleSubmit" />
</template>

<script setup>
    import StudentForm from '../components/StudentForm.vue'
    import { ref, onMounted } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { useMemberStore } from '../stores/member'

    const memberStore = useMemberStore()
    const route = useRoute()
    const router = useRouter()

    const student = ref({
        id: null,
        grades: {
            frontend: null,
            english: null,
            python: null,
        }
    })

    onMounted(() => {
        const stu = memberStore.getUserById(Number(route.params.id))
        if (stu) {
            student.value.id = stu.id
            student.value.grades = {...stu.grades}
        }
    })

    const handleSubmit = () => {
        memberStore.updateStudentGrades(student.value.id, student.value.grades)
        router.push('/students');
    }
</script>